<template>
     <div>
       <div class="txt-center mt30 mb30">
         总计{{page_data.tableDataLength}}个记录，
         分为{{page_data.pages}}页，
         当前为第{{page_data.page}}页
         每页
         <el-select v-model="value" size="small" @change="sentLength(value)">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
         </el-select>
         条
         <el-button
           v-if="page_data.is_preData"
           @click="firstData()"
           type="info"
           size="small">
           首页
         </el-button>
         <el-button
           v-if="page_data.is_preData"
           @click="preData()"
           type="info"
           size="small">
           上一页
         </el-button>
         <el-button
           v-if="page_data.pagination.has_more"
           @click="nextData()"
           type="info"
           size="small">
           下一页
         </el-button>
         <el-button
           v-if="page_data.pagination.has_more"
           @click="lastData()"
           type="info"
           size="small">
           尾页
         </el-button>
       </div>
     </div>
</template>

<script>
  export default {
    name: "page-ctrl",
    data(){
      return {
        options: [{
          value: '5',
          label: '5'
        }, {
          value: '10',
          label: '10'
        }, {
          value: '20',
          label: '20'
        }, {
          value: '30',
          label: '30'
        }],
        value: 5,
        is_change_length:true,
      }
    },
    mounted: function () {
      this.getInfoin();
    },
    props:['page_data'],
    methods:{
      getInfoin:function(){
        if(this.page_data.per_page){
          this.value=this.page_data.per_page;
          this.is_change_length=false
        }
      },
      sentLength:function(length){
        if(this.is_change_length){
          this.$emit("sentLengthfn",length)
        }
        this.is_change_length=true;
      },
      firstData:function(){
        this.$emit("firstfn")
      },
      nextData:function(){
        this.$emit("nextfn")
      },
      preData:function(){
        this.$emit("prefn")
      },
      lastData:function(){
        this.$emit("lastfn")
      }
    }
  }
</script>

<style scoped>

</style>
